<!--
 * @Description: 底部第二个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: liqi
 * @LastEditTime: 2022-09-07 19:17:26
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Pie } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadChart() {
      const data = [
        { type: "分类一", value: 27 },
        { type: "分类二", value: 25 },
        { type: "分类三", value: 18 },
        { type: "分类四", value: 15 },
        { type: "分类五", value: 10 },
        { type: "其他", value: 5 },
      ];

      const piePlot = new Pie(this.$refs["container"], {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        label: {
          type: "outer",
          content: "{name} {percentage}",
        },
        interactions: [
          { type: "pie-legend-active" },
          { type: "element-active" },
        ],
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              backgroundColor: "#03255f",
              color: "#fff",
            },
          },
        },
      });

      piePlot.render();
    },
  },
  created() {},
  mounted() {
    this.loadChart();
  },
};
</script>
<style scoped>
</style>